<script setup>
import { ref, onMounted } from 'vue';
import qiunVueUcharts from '@qiun/vue-ucharts';
import useUserStore from '@/store/modules/user'
import {listInfo} from "@/api/system/info.js";
const userStore = useUserStore();
const hotelDetails = ref({
  name: '酒店名称'
})
// 定义图表数据和配置
const chartData = ref({});
const chartData2 = ref({});
const infoList = ref([]);
const opts = ref({
  color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
  padding: [15,10,0,15],
  enableScroll: false,
  legend: {},
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    gridType: "dash",
    dashLength: 2
  },
  extra: {
    line: {
      type: "straight",
      width: 2,
      activeType: "hollow"
    }
  }
});
// 模拟从服务器获取数据
const getServerData = () => {
// 模拟从服务器获取数据时的延时
  setTimeout(() => {
// 模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    const res = {
      categories: ["10号","11号","12号"],
      series: [
        {
          name: infoList.value[0].hotelName+"订单量",
          data: [15,8,25]
        }
      ]
    };
    chartData.value = JSON.parse(JSON.stringify(res));
  }, 500);
};
function getList() {
  listInfo({managerId: userStore.id}).then(response => {
    infoList.value = response.rows
    infoList.value.forEach(item => {
      item.managerId = userStore.nickName
    })
    console.log(infoList.value)
    getServerData();
    getServerData2();
  })
}
const getServerData2 = () => {
// 模拟从服务器获取数据时的延时
  setTimeout(() => {
// 模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
    const res = {
      categories: ["10号","11号","12号"],
      series: [
        {
          name: infoList.value[0].hotelName+"收益情况",
          data: [1500,800,2500]
        }
      ]
    };
    chartData2.value = JSON.parse(JSON.stringify(res));
  }, 500);
};
// 组件挂载后获取数据
onMounted(() => {

  getList();
});
</script>

<template>
  <div class="charts-box">
    <qiun-vue-ucharts
        type="line"
        :opts="opts"
        :chartData="chartData"
    />
  </div>
  <div class="charts-box">
    <qiun-vue-ucharts
        type="column"
        :opts="opts"
        :chartData="chartData2"
    />
  </div>
</template>

<style scoped lang="scss">
.charts-box {
  padding-top: 15px;
  margin-top: 15px;
  width: 50%;
  height: 300px;
}
</style>